<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <link rel="icon" href="../img/image/suixun.ico" mce_href="../img/image/suixun.ico" type="image/x-icon">
    <link rel="shortcut icon" href="../img/image/suixun.ico" mce_href="../img/image/suixun.ico" type="image/x-icon">
    <title>随寻物联云平台</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/login.css" />
    <style type="text/css">
        @media only screen and (max-width: 1366px){
            .main .main-right {
                /*height: 240px !important;*/
            }
            .main .main-right .main-right-title span {
                font-size: 18px !important;
            }
        }
        .main .main-right .main-right-title span {
            margin: 40px 0px;
            font-size: 22px;
        }
        .lowHeight {
            height: 340px !important;
        }
        .main .main-right .main-right-username span img,.main .main-right .main-right-password span img {
            margin-left: 9px;
        }
    </style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript" src="../js/common.js" ></script>
<script type="text/babel">
    var newPwd = false,onceNewPwd = false;//2次密码验证状态
    var inputData = [
        {enable:false,img:'../img/icon/password.png',inputPhoneCode:'ipuNewPwd',verifyType:'newPwdError',divClass:'main-right-username',placeholder:'请输输入新密码',inputType:'password',inputRef:'newPwd',inputName:'newPwd',method:0},
        {enable:false,img:'../img/icon/password.png',inputPhoneCode:'ipuOnceNewPwd',verifyType:'onceNewPwdError',divClass:'main-right-password ',placeholder:'请再次输入新密码',inputType:'password',inputRef:'onceNewPwd',inputName:'onceNewPwd',method:1},
    ];
    var titleData = {titleName:'修改密码',imgClass:'imgHide'};
    var buttonData = {buttonName:'进入首页',aClass:'aHide'};
    //头部
    var  Title = React.createClass({
        render: function(){
            return (
                    <div className="main-right-title">
                        <span><img className={this.props.imgClass} src="../img/image/logo.png" />{this.props.titleName}</span>
                    </div>
            );
        }
    });
    //表单
    var  Input = React.createClass({
        render: function(){
            return (
                <div>
                    <div className={this.props.divClass}>
                        <span className="span-img"><img src={this.props.img} /></span>
                        <input type={this.props.inputType} className={this.props.inputPhoneCode}  placeholder={this.props.placeholder}  ref={this.props.inputRef} name={this.props.inputName} onBlur={this.props.onBlurMethod} onChange={this.props.onChangeMethod}/>
                        <div id={this.props.verifyType} className="errorMsg" ></div>
                    </div>
                </div>
            );
        }
    });
    //按钮
    var Button = React.createClass({
        render: function () {
            return (
                    <div>
                        <div className="main-right-button">
                            <div id="chickLogin" onClick={this.props.buttonClickMethod}>{this.props.buttonName}</div>
                        </div>

                    </div>
            );
        }
    });
    //所有组件嵌套
    var Main = React.createClass({
        //button点击事件
        onSubmit: function () {
            //TODO 处理相关验证任务
            if(onceNewPwd && newPwd){


                window.location.href="../main/main.html";
            }
        },
        //第一个密码的点击事件
        onNewPwdChange: function (e) {
            //TODO 处理相关验证任务
            var val = e.target.value;
            if((/^[\u4e00-\u9fa5],{0,}$/.test(val))){
                newPwd = false;
//                suixun.alert("密码不能含有中文!");
                $("#newPwdError").show();
            }else if(val.length>=6 && val.length<=20){
                var ipuOnceNewPwd = $(".ipuOnceNewPwd").val();
                if(ipuOnceNewPwd.length != 0){
                    if(val == ipuOnceNewPwd){
                        onceNewPwd = true;
                        $("#onceNewPwdError").hide();
                        newPwd = true;
                        $("#newPwdError").hide();
                    }else{
//                        suixun.alert("两次输入的密码不相同!");
                        $("#onceNewPwdError").show();
                        onceNewPwd = false;
                    }
                }else{
                    newPwd = true;
                    $("#newPwdError").hide();
                }
            }else{
//                suixun.alert("密码为6-20为字符!")
                $("#newPwdError").show();
                newPwd = false;
                return false;
            }
        },
        //第一个密码失去焦点事件
        newPwdBlur: function (e) {
            //TODO 处理相关验证任务
            var val = e.target.value;
            if((/^[\u4e00-\u9fa5],{0,}$/.test(val))){
                newPwd = false;
//                suixun.alert("密码不能含有中文!")
                $("#newPwdError").show();
            }else if(val.length>=6 && val.length<=20){
                var ipuOnceNewPwd = $(".ipuOnceNewPwd").val();
                if(ipuOnceNewPwd.length != 0){
                    if(val == ipuOnceNewPwd){
                        onceNewPwd = true;
                        $("#onceNewPwdError").hide();
                        newPwd = true;
                        $("#newPwdError").hide();
                    }else{
//                        suixun.alert("两次输入的密码不相同!");
                        $("#onceNewPwdError").show();
                        onceNewPwd = false;
                    }
                }else{
                    newPwd = true;
                    $("#newPwdError").hide();
                }
            }else{
//                suixun.alert("密码为6-20为字符!");
                $("#newPwdError").show();
                newPwd = false;
                return false;
            }
        },
        //第二个密码密码框的点击事件
        onOnceNewPwdChange: function (e) {
            console.log('第二个密码信息发生变化');
            //TODO 处理相关验证任务
            var val = e.target.value;
            if((/^[\u4e00-\u9fa5],{0,}$/.test(val))){
                onceNewPwd = false;
//                suixun.alert("密码不能含有中文!");
                $("#userPassword").show();
            }else if(val.length>=6 && val.length<=20){
                if(val == $(".ipuNewPwd").val()){
                    onceNewPwd = true;
                    $("#onceNewPwdError").hide();
                }else{
//                    suixun.alert("两次输入的密码不相同!");
                    $("#onceNewPwdError").show();
                    onceNewPwd = false;
                }
            }else{
//                suixun.alert("密码为6-20为字符!");
                $("#userPassword").show();
                onceNewPwd = false;
                return false;
            }
        },
        //第二个密码失去焦点事件
        onceNewPwdBlur: function (e) {
            //TODO 处理相关验证任务
            var val = e.target.value;
            if((/^[\u4e00-\u9fa5],{0,}$/.test(val))){
                onceNewPwd = false;
//                suixun.alert("密码不能含有中文!");
                $("#onceNewPwdError").show();
            }else if(val.length>=6 && val.length<=20){
                if(val == $(".ipuNewPwd").val()){
                    onceNewPwd = true;
                    $("#onceNewPwdError").hide();
                }else{
//                    suixun.alert("两次输入的密码不相同!");
                    $("#onceNewPwdError").show();
                    onceNewPwd = false;
                }
            }else{
//                suixun.alert("密码为6-20为字符!");
                $("#onceNewPwdError").show();
                onceNewPwd = false;
                return false;
            }
        },
        getInitialState: function () {
            return {inputData:this.props.inputData,titleData:this.props.titleData,buttonData:this.props.buttonData}
        },
        render: function () {
            {
                var onChangeMethod = [this.onNewPwdChange,this.onOnceNewPwdChange],
                    onBlurMethod = [this.newPwdBlur,this.onceNewPwdBlur];
                //优先生成多个Input组件
                var Inputs =  this.state.inputData.map(function(data){
                    return(
                        //查看官方文档，使用map时需定义一个key变量
                            <Input key={data.inputName} divClass={data.divClass} verifyType={data.verifyType} img={data.img} inputType = {data.inputType} inputPhoneCode={data.inputPhoneCode} placeholder={data.placeholder} inputRef={data.inputRef} onChangeMethod={onChangeMethod[data.method]} onBlurMethod={onBlurMethod[data.method]} phoneCodeClass={data.phoneCodeClass} />
                    );
                });
                console.log(Inputs)
            }
            return (
                    <div>
                        <header>
                            <div id="time">
                            </div>
                        </header>
                        <div className="main">
                            <div className="main-middle">
                                <div className="main-left">
                                    <img src="../img/image/login_middle.png" />
                                </div>
                                <div className="main-right lowHeight">
                                    <Title titleName={this.state.titleData.titleName} imgClass={this.state.titleData.imgClass} />
                                    {Inputs}
                                    <Button buttonClickMethod={this.onSubmit} buttonName={this.state.buttonData.buttonName}  />
                                </div>
                            </div>
                        </div>
                        <footer>
                            <div className="copyright">
                                <span><img src="../img/icon/copyright.png"/>Copyright 2015 杭州随寻科技有限公司 </span>
                            </div>
                            <div className="footer-rail above"></div>
                            <div className="footer-rail below"></div>
                        </footer>
                    </div>
            );
        }
    });
    ReactDOM.render(
            <Main  titleData={titleData} buttonData={buttonData} inputData={inputData} />,
        document.getElementById('login')
    );
</script>
</body>
</html>
